<template>
    <div>
        <el-row>
            <el-col>
                <el-form :inline="true" :model="formInline">
                    <el-form-item>
                        <el-input size="mini" v-model="formInline.title" placeholder="请输入名称"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-select clearable size="mini" v-model="formInline.status" placeholder="请选择状态">
                            <el-option label="启用" value="1"></el-option>
                            <el-option label="禁用" value="0"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" size="mini" @click="search">查询</el-button>
                    </el-form-item>
                </el-form>
            </el-col>
        </el-row>
        <el-row class="buttonList">
            <el-col>
                <el-button type="primary" size="mini" @click="newAddData">新增</el-button>
                <el-button :disabled="btnDisabled" type="primary" size="mini" @click="edit">编辑</el-button>
                <el-button :disabled="btnDisabled" type="primary" size="mini" @click="setPerson">检查人员</el-button>
                <el-button :disabled="btnDisabled" type="primary" size="mini" @click="setPerson('view')">查看人员</el-button>
                <el-button type="danger" size="mini">启用/禁用</el-button>
            </el-col>
        </el-row>
        <el-row>
            <el-col>
                <el-table
                        :data="tableData"
                        border
                        size="mini"
                        @selection-change="handleSelectionChange"
                        style="width: 100%">
                    <el-table-column
                            align="center"
                            type="selection"
                            width="55">
                    </el-table-column>
                    <el-table-column
                            align="center"
                            prop="TITLE"
                            label="检查项目">
                    </el-table-column>
                    <el-table-column
                            align="center"
                            prop="MSG"
                            label="描述">
                    </el-table-column>
                    <el-table-column
                            width="180px"
                            align="center"
                            prop="STARTTIME"
                            label="开始时间">
                        <template slot-scope="scope">
                            {{new Date(scope.row.STARTTIME).toLocaleString()}}
                        </template>
                    </el-table-column>
                    <el-table-column
                            width="180px"
                            align="center"
                            prop="ENDTIME"
                            label="结束时间">
                        <template slot-scope="scope">
                            {{new Date(scope.row.ENDTIME).toLocaleString()}}
                        </template>
                    </el-table-column>
                    <el-table-column
                            align="center"
                            prop="STATUS"
                            label="状态">
                        <template slot-scope="scope">
                            {{scope.row.STATUS ? '启用' : '禁用'}}
                        </template>
                    </el-table-column>
                    <el-table-column
                            align="center"
                            prop="CREATEUSERNAME"
                            label="创建人">
                    </el-table-column>
                </el-table>
                <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        background
                        layout="total, sizes, prev, pager, next, jumper"
                        :page-size="pagination.pageSize"
                        :total="pagination.total"
                        :page-sizes="[10, 20, 30, 50, 100]"
                >
                </el-pagination>
            </el-col>
        </el-row>
        <el-dialog title="检查任务" :visible.sync="dialogFormVisible" center width="50%">
            <el-form :model="form" ref="form" label-width="100px">
                <el-row>
                    <el-col class="nptError">
                        <el-form-item
                                prop="title"
                                :rules="{ required: true, message: '请输入检查任务名称', trigger: 'blur' }"
                                label="检查任务">
                            <el-input size="mini" v-model="form.title" autocomplete="off"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12" class="nptError">
                        <el-form-item
                                :rules="{ required: true, message: '请选择日期', trigger: 'change' }"
                                label="开始时间"
                                prop="startTime"
                                class="dateStyle">
                            <el-date-picker
                                    size="mini"
                                    v-model="form.startTime"
                                    value-format="yyyy-MM-dd HH:mm:ss"
                                    type="datetime"
                                    placeholder="选择日期时间">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12" class="nptError">
                        <el-form-item
                                label="结束时间"
                                prop="endTime"
                                :rules="{ required: true, message: '请选择日期', trigger: 'change' }"
                                class="dateStyle">
                            <el-date-picker
                                    size="mini"
                                    v-model="form.endTime"
                                    value-format="yyyy-MM-dd HH:mm:ss"
                                    type="datetime"
                                    placeholder="选择日期时间">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col style="margin-top: 8px">
                        <el-form-item
                                prop="msg"
                                :rules="{ required: true, message: '请输入检查内容', trigger: 'blur' }"
                                label="检查内容">
                            <el-input type="textarea" size="mini" v-model="form.msg" autocomplete="off"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col style="margin-top: 8px">
                        <el-form-item label="是否日常检查">
                            <el-switch v-model="form.isCheckDay"></el-switch>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button size="mini" @click="dialogFormVisible = false">取 消</el-button>
                <el-button size="mini" type="primary" @click="newAdd">确 定</el-button>
            </div>
        </el-dialog>
        <el-dialog title="配置人员" :visible.sync="dialogFormVisible2" v-if="dialogFormVisible2" center width="80%">
            <el-row>
                <el-col :span="22">
                    <el-form :inline="true" :model="userformInline">
                        <!--<el-form-item>
                            <el-select clearable size="mini" v-model="userformInline.departmentId" placeholder="请选择院系">
                            </el-select>
                        </el-form-item>-->
                        <el-form-item>
                            <el-select clearable size="mini" v-model="userformInline.userType" placeholder="请选择老师/学生">
                                <el-option label="老师" value="1"></el-option>
                                <el-option label="学生" value="2"></el-option>
                                <el-option label="其它" value="0"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item>
                            <el-input size="mini" v-model="userformInline.name" placeholder="请输入用户名"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-input size="mini" v-model="userformInline.number" placeholder="请输入工号/学号"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-select size="mini" v-model="userformInline.status" placeholder="请选择状态">
                                <el-option label="启用" value="1"></el-option>
                                <el-option label="禁用" value="0"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" size="mini" @click="usersearch">查询</el-button>
                        </el-form-item>
                    </el-form>
                </el-col>
                <el-col :span="2" style="line-height: 43px">
                    <el-button :disabled="userbtnDisabled" type="primary" size="mini" @click="clickPeizhi">配置范围</el-button>
                </el-col>
            </el-row>
            <el-row>
                <el-col>
                    <el-table
                            :data="treeList"
                            border
                            size="mini"
                            @selection-change="userhandleSelectionChange"
                            style="width: 100%">
                        <el-table-column
                                align="center"
                                type="selection"
                                width="55">
                        </el-table-column>
                        <el-table-column
                                align="center"
                                prop="NAME"
                                label="用户名">
                        </el-table-column>
                        <el-table-column
                                align="center"
                                prop="NUM"
                                label="学号/工号">
                        </el-table-column>
                        <el-table-column
                                align="center"
                                prop="SOURCENAME"
                                label="类型">
                        </el-table-column>
                        <el-table-column
                                align="center"
                                prop="DEPARTMENTNAME"
                                label="院系">
                        </el-table-column>
                        <el-table-column
                                align="center"
                                prop="STATUS"
                                label="状态">
                            <template slot-scope="scope">
                                {{scope.row.STATUS ? '启用' : '禁用'}}
                            </template>
                        </el-table-column>
                        <el-table-column
                                align="center"
                                prop="CREATEUSERNAME"
                                label="创建人">
                        </el-table-column>
                    </el-table>
                    <el-pagination
                            @size-change="userhandleSizeChange"
                            @current-change="userhandleCurrentChange"
                            background
                            layout="total, sizes, prev, pager, next, jumper"
                            :page-size="pagination.pageSize"
                            :total="pagination.total"
                            :page-sizes="[10, 20, 30, 50, 100]"
                    >
                    </el-pagination>
                </el-col>
            </el-row>
            <div slot="footer" class="dialog-footer">
                <el-button size="mini" @click="dialogFormVisible2 = false">取 消</el-button>
            </div>
        </el-dialog>
        <el-dialog title="配置范围" :visible.sync="dialogFormVisible3" v-if="dialogFormVisible3" center width="80%">
            <el-form :model="form">
                <el-form-item>
                    <el-col :span="8" v-for="item in treeList2" style="margin-bottom: 5px">
                        <el-card shadow="hover">
                            <el-tree
                                    node-key="ID"
                                    show-checkbox
                                    :default-checked-keys="checkedScope"
                                    ref="tree" :data="item"
                                    :props="defaultProps"></el-tree>
                        </el-card>
                    </el-col>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button size="mini" @click="dialogFormVisible3 = false">取 消</el-button>
                <el-button size="mini" type="primary" @click="settingScope">确 定</el-button>
            </div>
        </el-dialog>
        <el-dialog title="配置人员" :visible.sync="dialogFormVisible4" center width="80%">
            <el-row>
                <el-col :span="22">
                    <el-form :inline="true" :model="userformInline">
                        <!--<el-form-item>
                            <el-select clearable size="mini" v-model="userformInline.departmentId" placeholder="请选择院系">
                            </el-select>
                        </el-form-item>-->
                        <el-form-item>
                            <el-select clearable size="mini" v-model="userformInline.userType" placeholder="请选择老师/学生">
                                <el-option label="老师" value="1"></el-option>
                                <el-option label="学生" value="2"></el-option>
                                <el-option label="其它" value="0"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item>
                            <el-input size="mini" v-model="userformInline.name" placeholder="请输入用户名"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-input size="mini" v-model="userformInline.number" placeholder="请输入工号/学号"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-select size="mini" v-model="userformInline.status" placeholder="请选择状态">
                                <el-option label="启用" value="1"></el-option>
                                <el-option label="禁用" value="0"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" size="mini" @click="usersearch">查询</el-button>
                        </el-form-item>
                    </el-form>
                </el-col>
                <el-col :span="2" style="line-height: 43px">
                    <el-button :disabled="userbtnDisabled" type="primary" size="mini" @click="getUserScope">配置范围</el-button>
                </el-col>
            </el-row>
            <el-row>
                <el-col>
                    <el-table
                            :data="treeList3"
                            border
                            size="mini"
                            @selection-change="userhandleSelectionChange"
                            style="width: 100%">
                        <el-table-column
                                align="center"
                                type="selection"
                                width="55">
                        </el-table-column>
                        <el-table-column
                                align="center"
                                prop="USERNAME"
                                label="用户名">
                        </el-table-column>
                        <el-table-column
                                align="center"
                                prop="USERNUM"
                                label="学号/工号">
                        </el-table-column>
                        <el-table-column
                                align="center"
                                prop="USERTYPE"
                                label="类型">
                            <template slot-scope="scope">
                                {{scope.row.USERTYPE === 0 ? '其它' : scope.row.USERTYPE === 1 ? '老师' : '学生'}}
                            </template>
                        </el-table-column>
                        <el-table-column
                                align="center"
                                prop="STATUS"
                                label="状态">
                            <template slot-scope="scope">
                                {{scope.row.STATUS ? '启用' : '禁用'}}
                            </template>
                        </el-table-column>
                        <el-table-column
                                align="center"
                                prop="CREATEUSERNAME"
                                label="创建人">
                        </el-table-column>
                    </el-table>
                    <el-pagination
                            @size-change="userhandleSizeChange"
                            @current-change="userhandleCurrentChange"
                            background
                            layout="total, sizes, prev, pager, next, jumper"
                            :page-size="pagination.pageSize"
                            :total="pagination.total"
                            :page-sizes="[10, 20, 30, 50, 100]"
                    >
                    </el-pagination>
                </el-col>
            </el-row>
            <div slot="footer" class="dialog-footer">
                <el-button size="mini" @click="dialogFormVisible4 = false">取 消</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        name: "taskmanage",
        data() {
            return {
                formInline: {},
                dialogFormVisible: false,
                dialogFormVisible2: false,
                dialogFormVisible3: false,
                dialogFormVisible4: false,
                isEdit: '',
                tableData: [],
                pagination: {
                    pageSize: 20,
                    pageNo: 1,
                    total: 1
                },
                userpagination: {
                    pageSize: 20,
                    pageNo: 1,
                    total: 1
                },
                selectId: [],
                form: {
                    title: '',
                    msg: '',
                    startTime: '',
                    endTime: '',
                    isCheckDay: true,
                },
                btnDisabled: true,
                defaultProps: {
                    children: 'list',
                    label: 'NAME'
                },
                treeList: [],
                treeList2: [],
                treeList3: [],
                userselectId: [],
                userformInline: {},
                userbtnDisabled: true,
                userType: '',
                checkedScope: []
            }
        },
        created() {
            this.getData(this.pagination.pageSize, this.pagination.pageNo);
        },
        methods: {
            clickPeizhi() {
                this.checkedScope = []
                this.$forceUpdate()
                this.dialogFormVisible3 = true
            },
            search() {
                this.$post('/check/findCheck', {
                    title: this.formInline.title,
                    status: this.formInline.status,
                    pageSize: this.pagination.pageSize,
                    pageNo: 1
                }).then(res => {
                    this.tableData = res.data.data.dataList;
                    this.pagination.total = res.data.data.total;
                })
            },
            usersearch() {
                this.userformInline.pageSize = this.userpagination.pageSize;
                this.userformInline.pageNo = 1;
                let url = '';
                if(this.userType === 'view') {
                    url = '/check/findCheckUser'
                } else {
                    url = '/user/findUser'
                }
                this.$post(url, this.userformInline).then(res => {
                    if(res.data.status != 1) {
                        this.$message.error('条件输入错误，请检查');
                        return;
                    }
                    this.userpagination.total = res.data.data.total;
                    if(this.userType === 'view') {
                        this.treeList3 = res.data.data.dataList;
                    } else {
                        this.treeList = res.data.data.dataList;
                    }
                })
            },
            getData(pageSize, pageNo) {
                this.$post('/check/findCheck', {pageSize, pageNo}).then(res => {
                    console.log(res)
                    this.tableData = res.data.data.dataList;
                    this.pagination.total = res.data.data.total;
                })
            },
            getUser(pageSize,pageNo) {
                this.$post('/user/findUser', {pageSize, pageNo}).then(res => {
                    this.pagination.total = res.data.data.total;
                    this.treeList = res.data.data.dataList;
                });
            },
            getTaskUser(pageSize,pageNo) {
                this.$post('/check/findCheckUser', {pageSize, pageNo,checkId: this.selectId[0].ID}).then(res => {
                    this.pagination.total = res.data.data.total;
                    this.treeList3 = res.data.data.dataList;
                });
            },
            newAddData() {
                this.form = {
                    title: '',
                    msg: '',
                    startTime: '',
                    endTime: '',
                    isCheckDay: true,
                }
                this.dialogFormVisible = true;
                this.isEdit = '';
            },
            edit() {
                this.dialogFormVisible = true;
                this.isEdit = 'edit';
                this.form.title = this.selectId[0].TITLE;
                this.form.msg = this.selectId[0].MSG;
                this.form.startTime = this.getNowFormatDate(this.selectId[0].STARTTIME);
                this.form.endTime = this.getNowFormatDate(this.selectId[0].ENDTIME);
                this.form.isCheckDay = !!this.selectId[0].ISCHECKDAY;
            },
            newAdd() {
                this.$refs['form'].validate((valid) => {
                    if (valid) {
                        let url = '';
                        if(this.isEdit === 'edit') {
                            url = '/check/update';
                            this.form.id = this.selectId[0].ID;
                        } else {
                            url = '/check/add';
                        }
                        this.form.isCheckDay = this.form.isCheckDay ? 1 : 0;
                        this.$post(url, this.form).then(res => {
                            if(res.data.status === 1) {
                                this.dialogFormVisible = false;
                                this.getData(this.pagination.pageSize, this.pagination.pageNo);
                                this.$message.success('保存成功');
                            } else {
                                this.$message.error(res.data.msg);
                            }
                        });
                    }
                })
            },
            setPerson(type) {
                this.$post('/public/findStructureByTest').then(res => {
                    for (let i = 0; i < res.data.data.length; i++) {
                        this.treeList2[i] = [];
                        this.treeList2[i].push(res.data.data[i]);
                    }
                })
                this.userformInline = {}
                if(type === 'view') {
                    this.userType = type;
                    this.getTaskUser(this.userpagination.pageSize, this.userpagination.pageNo);
                    this.dialogFormVisible4 = true;
                } else {
                    this.userType = '';
                    this.getUser(this.userpagination.pageSize, this.userpagination.pageNo);
                    this.dialogFormVisible2 = true;
                }
            },
            addPerson() {},
            handleSelectionChange(val) {
                this.selectId = val;
                if(val.length === 1) {
                    this.btnDisabled = false;
                } else {
                    this.btnDisabled = true;
                }
            },
            handleSizeChange(size) {
                this.pagination.pageSize = size;
                this.getUser(size, this.pagination.pageNo);
            },
            handleCurrentChange(page) {
                this.pagination.pageNo = page;
                this.getUser(this.pagination.pageSize, page);
            },
            getNowFormatDate(time) {
                let date = new Date(time);
                let year = date.getFullYear();
                let month = date.getMonth() + 1;
                let strDate = date.getDate();
                let Hour =  date.getHours();       // 获取当前小时数(0-23)
                let Minute =  date.getMinutes();     // 获取当前分钟数(0-59)
                let Second = date.getSeconds();     // 获取当前秒数(0-59)
                if (Hour<10) {
                    Hour = "0" + Hour;
                }
                if (Minute <10) {
                    Minute = "0" + Minute;
                }
                if (Second <10) {
                    Second = "0" + Second;
                }
                if (month >= 1 && month <= 9) {
                    month = "0" + month;
                }
                if (strDate >= 0 && strDate <= 9) {
                    strDate = "0" + strDate;
                }
                let HMS = Hour + ':' + Minute +':' + Second;
                let temp_time = year+'-'+month+'-'+strDate+' '+HMS;
                return temp_time;
            },
            userhandleSelectionChange(val) {
                this.userselectId = val;
                if(val.length === 1) {
                    this.userbtnDisabled = false
                } else {
                    this.userbtnDisabled = true
                }
            },
            userhandleSizeChange(size) {
                this.userpagination.pageSize = size;
                if(this.userType === 'view') {
                    this.getTaskUser(size, this.userpagination.pageNo);
                } else {
                    this.getUser(size, this.userpagination.pageNo);
                }
            },
            userhandleCurrentChange(page) {
                this.userpagination.pageNo = page;
                if(this.userType === 'view') {
                    this.getTaskUser(this.userpagination.pageSize, page)
                } else {
                    this.getUser(this.userpagination.pageSize, page);
                }
            },
            settingScope() {
                let classroomId = [];
                for(let i = 0; i < this.$refs.tree.length; i++) {
                    const arr = this.$refs.tree[i].getCheckedKeys(true);
                    if(arr.length === 0) continue;
                    for(let j = 0; j < arr.length; j++) {
                        classroomId.push(arr[j])
                    }
                };
                if(classroomId.length === 0) {
                    this.$message.error('请至少选择一个范围')
                } else {
                    let userId = [];
                    if(this.userselectId.length === 1) {
                        userId.push(this.userselectId[0].ID)
                    } else {
                        for(let i = 0; i < this.userselectId.length; i++) {
                            userId.push(this.userselectId[i].ID)
                        }
                    }
                    this.$post('/check/addCheckUserScope', {
                        classroomId: classroomId.join(),
                        checkId: this.selectId[0].ID,
                        userId: userId.join()
                    }).then(res => {
                        if(res.data.status === 1) {
                            this.dialogFormVisible2 = false;
                            this.dialogFormVisible3 = false;
                            this.$message.success(res.data.msg)
                        } else {
                            this.$message.error(res.data.msg)
                        }
                    })
                }
            },
            getUserScope() {
                this.$post('/check/findCheckUserScope',
                    {
                        checkId: this.selectId[0].ID,
                        userId: this.userselectId[0].USERID
                    }).then(res => {
                        console.log(res)
                        this.dialogFormVisible3 = true;
                        this.checkedScope = res.data.data.dataList.map(item => item.CLASSROOMID);
                })
            }
        }
    }
</script>

<style scoped lang="scss">
    .nptError {
        /deep/.el-form-item__error {
            top: 32px;
        }
    }
</style>
